<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./CSS/reset.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <title>京东顶部导航条</title>
    <style>
         .clearfix::after,
        .clearfix::before {
            content: "";
            display: table;
            clear: both;
        }

        body {
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        }

        .header {
            /* 设置背景颜色 */
            background-color: #e3e4e5;
            /* 设置行高，没有设置高度，使文字垂直居中 */
            line-height: 30px;
            /* 设置底部边框 */
            border-bottom: 1px solid #ddd;
        }

        .nav {
            height: 30px;
            /* 设置水平居中 */
            margin: 0px auto;
            /* 设置宽度 */
            width: 1190px;
         
        }
        /* 设置字体样式 */
        .nav a,.nav span,.nav i{
            /* 设置内部字体颜色 */
            color: #999;
             /* 设置a标签去掉下划线 */
             text-decoration: none;
        }
        .nav a:hover, a.highlight {
            color:#f10215;
        }

        /* 设置左边菜单左浮动，以及右边菜单子项li左浮动水平排列 */
        .location,
        .menu-list li {
            float: left;
        }

        .location i.fas {
            margin-right: 2px;
            color: #f10215;
        }
        .location .city-list{
            width: 320px;
            height: 436px;
            background-color: #fff;
            border:1px solid rgb(204,204,204);
            box-shadow: 0 10px 10px rgba(204,204,204,1);
            display: none;
            position:absolute;
            top: 30px;
          
        }
        .current-city{
            position:relative;
            padding: 0px 8px;
            border:1px solid transparent;
            border-bottom: none;
            z-index: 1;

        }
        .location:hover .city-list{
            display: block;

        }
        .location:hover .current-city{
            background-color: #fff;
            border:1px solid rgb(204,204,204);
            border-bottom: none;
            
        }
        .city-list ul{
            margin-left: 8px;
            color: #999;
        }
        .city-list ul li{
            margin:10px 20px 10px 0px;
            padding: 0px 5px;   
            float: left;
            text-align: center;
            line-height: 25px;
        }
        li.active{
            background-color: #f10215;
            color:#fff;
        }
        .city-list ul li:hover{
           background-color:rgba(153,153,153,.3);
           color:#f10215
        }
        /* 设置右边菜单列表右浮动 */
        .menu-list {
            float: right;
        }

        .menu-list li.line {
            margin: 10px 12px;
            width: 1px;
            height: 10px;
            background-color: #999;
        }
        .menu-list li i{
            margin-left: 6px;
        }
        .my-jd:hover .myjd-box{
            display: block;
        }
        .my-jd .jd{
            position: relative;
            padding: 0px 8px;
            border:1px solid transparent;
            border-bottom: none;
            z-index: 1;
          
        }
        .my-jd:hover .jd{
            background-color: #fff;
            border:1px solid rgb(204,204,204);
            border-bottom: none;
           
        }
      .my-jd .myjd-box{
          width: 281px;
          height: 162px;
          background-color: #fff;
          border:1px solid rgb(204,204,204);
          box-shadow: 0 10px 10px rgba(204,204,204,1);
          position: absolute;
          top: 30px;
          display: none;
      }
      .myjd-box ul{
          color: #999;
          border-bottom:1px solid rgb(204,204,204) ;
      }
      .myjd-box ul li{
          padding-left: 8px;
          margin-right: 50px;
          width: 60px;
         
      }
    </style>
</head>

<body>
    <!-- 创建外围容器 -->
    <div class="header">
        <!-- 创建内部容器 -->
        <div class="nav clearfix">
            <!-- 创建左侧菜单 -->
            <div class="location">
                <div class="current-city">
                    <i class="fas fa-map-marker-alt"></i>
                    <a href="#">广东</a>
                </div>
                <div class="city-list">
                    <ul>
                        <li>北京</li>
                        <li>上海</li>
                        <li>天津</li>
                        <li>重庆</li>
                        <li>河北</li>
                        <li>山西</li>
                        <li>河南</li>
                        <li>辽宁</li>
                        <li>吉林</li>
                        <li>黑龙江</li>
                        <li>内蒙古</li>
                        <li>江苏</li>
                        <li>山东</li>
                        <li>安徽</li>
                        <li>浙江</li>
                        <li>福建</li>
                        <li class="active">广东</li>
                    </ul>
                </div>
            </div>
            <!-- 创建右侧菜单 -->
            <ul class="menu-list clearfix">
                <li><a href="#">你好,请登录&nbsp;&nbsp;&nbsp;</a><a class="highlight" href="#">免费注册</a></li>
                <li class="line"></li>
                <li><a href="#">我的订单</a></li>
                <li class="line"></li>
                <li class="my-jd">
                    <div class="jd">
                        <a href="#">我的京东</a><i class="fas fa-angle-down"></i>
                    </div>
                    <div class="myjd-box">
                        <ul class="clearfix">
                            <li>待处理订单</li>
                            <li>消息</li>
                            <li>返修退换货</li>
                            <li>我的问答</li>
                            <li>降价商品</li>
                            <li>我的关注</li>
                        </ul>
                        <ul>
                            <li>我的京豆</li>
                            <li>我的优惠券</li>
                            <li>我的白条</li>
                            <li>我的理财</li>
                        </ul>
                    </div>
                </li>
                <li class="line"></li>
                <li><a href="#">京东会员</a></li>
                <li class="line"></li>
                <li><a class="highlight" href="#">企业采购</a><i class="fas fa-angle-down"></i></li>
                <li class="line"></li>
                <li><span>客户服务</span></li>
                <li class="line"></li>
                <li><span>网站导航</span><i class="fas fa-angle-down"></i></li>
                <li class="line"></li>
                <li><span>手机京东</span></li>
            </ul>
        </div>
    </div>
</body>

</html>